<template>
<div>
  <el-table :data="props.whichList"
  height="400px" 
  style="width: 90%;margin-left: 80px;"
  :row-style="{height: '60px'}"
  >
    <el-table-column prop="name" label="歌曲" width="400">
      <template #default="scope" >
<!--        <heart-filled  style="fontSize:18px ;color:#FF3030"/>-->
         <span class="sn" @click="search1(scope.row.name)">{{scope.row.name}}</span>
<!--         <el-icon style="float: right;" size="20px"><FolderAdd /></el-icon>-->
<!--         <el-icon style="float: right;margin-left: 10px;"  size="20px"><Download /></el-icon>-->
<!--         <el-icon style="float: right;margin-left: 10px;" size="20px"><MoreFilled /></el-icon>-->

<!--        <pause-outlined  style="float: right;margin-left: 10px;" size="20px" />-->
        <el-icon  style="float: right;margin-left: 10px;" size="20px" @click="play(scope.row.id)"><VideoPlay /></el-icon>
        <el-icon v-if="scope.row.mvid" style="float: right;margin-left: 10px;" size="20px"  @click="playMV(scope.row.mvid)"><youtube-outlined /></el-icon>
        </template>
    </el-table-column>
    <el-table-column prop="artists" label="歌手" width="180" :formatter="artistsData">
      <template #default="scope" >
        <span class="ar" v-for="(item,index) in scope.row.artists" :key="item" @click="searchway=2;search1(item.name)">
          {{scope.row.artists.length-1===index? item.name:item.name+'/'}}
        </span>
      </template>
    </el-table-column> 
    <el-table-column prop="album.name" label="专辑"  >
      <template #default="scope" >
        <span class="al" @click="search1(scope.row.album.name)">{{scope.row.album.name}} </span>
      </template>
    </el-table-column>
    <el-table-column prop="duration" label="时长"   :formatter="dtData"/>
  </el-table>
</div>
</template>

<script setup>
import { useRouter } from "vue-router";
import axios from "axios";
import {baseURL} from "@/request/index.js";
import {defineProps, ref} from "vue";
import {useSongsStore,useMVStore} from "@/Store/Pinia/pinia"
const songsStore =useSongsStore();
const mvstore=useMVStore();
const router = useRouter();
const mvurl=ref('');
const searchway=ref(1);
const props = defineProps({
  whichList: {
    type: String
  }
})

   function artistsData(row){
      let arr = []
      row.artists.forEach((item, index)=>{
        if (index > 2) {
          return
        }
        arr.push(item.name);
      })
      return arr.join('/')
    }
    function play(id) {
      songsStore.listType=1;
      songsStore.getcurrentplay(id);
      songsStore.getlyc(id);
      axios.post(baseURL+"/song/url?id=" + id).then((res) => {  //获取歌曲地址
        songsStore.getSongUrl(res.data.data[0].url)
        songsStore.readyplay();
      })
    }
    function playMV(mvid){
      axios.post(baseURL+"/mv/url?id=" + mvid).then((res) => { //获取MV地址
        mvurl.value = res.data.data.url;
     }).then(()=>{
        mvstore.$patch((state)=>{
          state.mvid=mvid;
        })
      router.push({name:'songsMV',params:{mvurl:mvurl.value}})
     })
    }
function search1(value){
  songsStore.show=1;
  songsStore.search(value);
  if(searchway.value===1) {
    router.push({path: '/homePage/searchList/1'})
  }
  else{
    searchway.value=1;
    router.push({path:'/homePage/singerDetail/5'})
  }
}
    function dtData(row){
           var t;
        if(row.duration > -1){
            var min = Math.floor(row.duration/1000/60);
            var sec = row.duration/1000-min*60;
            if(min < 10) {
                t = '0'+ min + ":";
            } else {
                t = min + ":";
            }
            if(sec < 10){
              t += "0";
              t+=sec;}
              else{
                t+=sec;
              }
        t=t.substring(0,5);
        return t;
         }
    }

</script>

<style scoped>

.ar:hover,.sn:hover,.al:hover{
  cursor: pointer;
  color: #8e09dc;
}
</style>